<template>
  <div>
    <ul class="text-box">
      <li>
        <span>上传单张图片</span>
        <el-upload :action="action" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="true" :before-upload="beforeAvatarUpload" :multiple="false">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </li>
      <li>
        <span>上传多张图片</span>
        <el-upload :action="action" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="true" :before-upload="beforeAvatarUpload" :multiple="true">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </li>
      <li>
        <span>导入表格</span>
        <el-upload class="upload-demo" :action="action2" :on-preview="handlePreview1" :on-remove="handleRemove1" :limit="1" :on-exceed="handleExceed1" :file-list="fileList" :before-remove="beforeRemove1">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </li>
    </ul>
  </div>
</template>

<script>
import { uploadDel } from "../api/module/test";
export default {
  components: {},
  props: [],
  data () {
    return {
      /**上传图片 */
      action: process.env.VUE_APP_URL + '/upload',
      dialogImageUrl: '',
      dialogVisible: false,
      /**导入表格 */
      action2: process.env.VUE_APP_URL + '/xlsx/upload',
      fileList: []
      //   fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]
    };
  },
  methods: {
    /**导入文件 */
    /**文件列表移除文件时的钩子 */
    handleRemove1 (file, fileList) {
      console.log(file, fileList);
    },
    /**点击文件列表中已上传的文件时的钩子 */
    handlePreview1 (file) {
      console.log(file);
    },
    /**文件超出个数限制时的钩子 */
    handleExceed1 (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    /**删除文件之前的钩子 */
    beforeRemove1 (file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    /**上传文件之前的钩子 */
    beforeAvatarUpload2 (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    /**上传图片 */
    /**文件列表移除文件时的钩子 */
    handleRemove (file) {
      uploadDel({ src: file.response.data }).then((result) => {
        console.log(result)
      })
    },
    /**点击文件列表中已上传的文件时的钩子 */
    handlePictureCardPreview (file) {
      console.log(123123);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /**上传文件之前的钩子 */
    beforeAvatarUpload (file) {
      console.log(file);
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },
  mounted () { },
};
</script>

<style>
.text-box li {
  margin-bottom: 12px;
}
.text-box li > span {
  display: inline-block;
  font-size: 16px;
  margin-bottom: 12px;
}
.upload-demo {
  width: 220px;
}
</style>